{% extends 'extends/nav_front_all_.html' %}

{% block main %}

<div class="container-fluid mt-4">
    <div class="row">
        <!-- 编辑器区域 - 左侧 -->
        <div class="col-md-6">
            <div class="card h-100">
                <!-- 卡片头部 -->
                <div class="card-header">
                    <h5 class="mb-0">{% if pid %}修改{% else %}发布{% endif %}博客</h5>
                </div>

                <!-- 卡片主体 - 增加内边距和表单间距 -->
                <div class="card-body p-4">  <!-- 增加padding -->
                    <form id="post">
                        <!-- 表单组1：增加mb-4间距 + label添加mb-2 -->
                        <div class="form-group mb-4">  <!-- 最大间距 -->
                            <label for="title" class="form-label mb-2 d-block"><b>标题</b></label>
                             <input type="text" name="title" id="title" class="form-control"
                                   placeholder="请输入标题" required
                                   value="{{ blog.title if blog else '' }}">
                        </div>

                        <!-- 表单组2：同样处理 -->
                        <div class="form-group mb-4">
                            <label for="tags" class="form-label mb-2 d-block"><b>博客类型</b></label>
                            <select name="tags" id="tags" class="form-control" required>
                                <option value="交友" {% if blog and blog.sort == '交友' %}selected{% endif %}>交友</option>
                                <option value="求助" {% if blog and blog.sort == '求助' %}selected{% endif %}>求助</option>
                                <option value="交易" {% if blog and blog.sort == '交易' %}selected{% endif %}>交易</option>
                            </select>
                        </div>

                        <!-- 表单组3：正文区域 -->
                        <div class="form-group mb-4">
                            <label for="myeditor" class="form-label mb-2 d-block"><b>正文</b></label>
                            <textarea id="myeditor" class="form-control" style="height: 300px;"></textarea>                        </div>
                    </form>
                </div>

                <!-- 卡片底部 -->
                <div class="card-footer">
                    <button type="submit" form="post" class="btn btn-primary" name="action" value="publish" id="publishbut">
                        {% if pid %}更新{% else %}发布{% endif %}
                    </button>
                </div>
            </div>
        </div>

        <!-- 预览区域 - 右侧 -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">正文预览</h5>
                </div>
                <div class="card-body overflow-auto" id="preview-area"></div>
            </div>
        </div>
    </div>
</div>

<script>
    function GetContent(){
        return tinymce.activeEditor.getContent()
    }

    function SetContent(html){
        tinymce.activeEditor.setContent(html)
    }

    function updatePreview() {
        Element_('preview-area').innerHTML = GetContent()
    }

    function loadEditor(){
        tinymce.init({
        selector: '#myeditor',
        plugins: 'image',
        images_upload_handler: (blobInfo) => new Promise((resolve) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result);
            reader.readAsDataURL(blobInfo.blob());
        }),
        //自动刷新
        setup: function(editor) {
            editor.on('init',()=>{
                {% if blog %}
                editor.setContent(`{{ blog.content|safe }}`);
                updatePreview();
                {% endif %}
            })

            editor.on('change', function() {
                updatePreview();
            });

            editor.on('keyup', function() {
                updatePreview();
            });
        }
    });
    }

    onUrlsReady(urls=>{
        loadEditor()

        Event_('publishbut','click',event=>{
            data={
                title:Element_('title').value,
                sort:Element_('tags').value,
                content:GetContent()
            }

            {% if pid %}
            data.pid = '{{ pid }}';
            {% endif %}
            Fetch(urls.service.publish,'post',data,async res => {
                await Flash(res.msg)
                Redirect()
            })
        })

    })




</script>
{% endblock %}